import 'package:flutter/material.dart';

class ListViewDemoWidget extends StatelessWidget {
  const ListViewDemoWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber,
        title: const Text('案例-ListView'),
      ),
      body: ListView.separated(
        itemBuilder: (BuildContext context, int index) {
          return Container(
            color: Colors.white,
            padding: const EdgeInsets.all(10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  // 时间和状态
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text('商品名称：'),
                    const Text('待发货', style: TextStyle(color: Colors.orange)),
                  ],
                ),
                Row(
                  // 图片 标题 和价格等
                  children: [
                    Image.network(
                      'https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg',
                      width: 100,
                      height: 100,
                      fit: BoxFit.cover,
                    ),
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.only(
                          left: 10,
                          right: 10,
                          top: 5,
                          bottom: 5,
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Expanded(
                                  child: Text('茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯'),
                                ),
                                Text('x 2'),
                              ],
                            ), // 名称和个数
                            Padding(
                              padding: const EdgeInsets.only(top: 5),
                              child: Container(
                                padding: const EdgeInsets.only(
                                  top: 3,
                                  bottom: 3,
                                ),
                                decoration: BoxDecoration(
                                  color: const Color.fromARGB(
                                    255,
                                    249,
                                    247,
                                    247,
                                  ),
                                  borderRadius: BorderRadius.circular(10),
                                ),
                                child: Text(
                                  "规格: 白色240ml",
                                  style: const TextStyle(color: Colors.grey),
                                ),
                              ),
                            ), // 规格
                            Padding(
                              padding: const EdgeInsets.only(top: 5),
                              child: Text('\$25'),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 10, right: 10, top: 10),
                  child: Container(
                    alignment: Alignment.centerRight,
                    child: const Text("合计: \$259"),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 10, right: 10, top: 10),
                  child: Container(
                    alignment: Alignment.centerRight,
                    child: Container(
                      padding: const EdgeInsets.all(5),
                      decoration: BoxDecoration(
                        color: const Color.fromARGB(255, 255, 255, 255),
                        border: Border.all(color: Colors.black),
                      ),
                      child: const Text("再次购买"),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
        separatorBuilder:
            (context, index) =>
                const Divider(color: Color.fromARGB(20, 0, 0, 0), height: 1),
        itemCount: 10,
      ),
    );
  }
}
